<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>政务数据资产普查系统</title>
    <link rel="stylesheet" href="../../public/libs/layui/css/layui.css">
    <link rel="stylesheet" href="../../public/css/main.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_540221_mtvfb4bu66y4aemi.css">
</head>

<body>
<!--静态展示,内容动态加载tabAdd操作引入 -->
<div class="item_table" id="layerwrap">
    <!-- <form class="layui-form" > -->

    <div class="layui-form-item">
        <div class="layui-input-inline">
            <input type="text" name="title" placeholder="请输入事项名称" autocomplete="off" class="layui-input">
        </div>

        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit @click="getList">
                <i class="mine-icon">&#xe613;</i>搜索
            </button>
        </div>

        <div class="layui-input-inline">
            <button class="layui-btn" data-method="notice" data-type="addform" data-title="需求新增" @click="addButton">
                <i class="mine-icon">&#xe6d2;</i>新增
            </button>
        </div>

        <div class="layui-input-inline">
            <button class="layui-btn" data-size="500px" data-method="offset" data-type="export"
                    data-title="确定要导出用户数据吗？">
                <i class="mine-icon">&#xe63d;</i>导出数据
            </button>
        </div>

        <div class="layui-input-inline">
            <button class="layui-btn" data-size="500px" data-method="offset" data-type="import"
                    data-title="Excel导入">
                <i class="mine-icon">&#xe627;</i>Excel导入
            </button>
        </div>

        <div class="layui-input-inline">
            <button class="layui-btn" @click="deleteAll">
                <i class="mine-icon">&#xe609;</i>批量删除
            </button>
        </div>
    </div>

    <table class="layui-hide" id="layui_table" lay-filter="layerTable" lay-data="{id: 'idTest'}"></table>

    <div id="item_layer" style="display: none">
        <form id="item_form" class="layui-form" action="" lay-filter="item_form">
            <div class="layui-form-item">
                <label class="layui-form-label">需求部门</label>
                <div class="layui-input-block">
                    <input type="hidden" name="demandDepartId"/>
                    <input type="text" name="demandDepartName" autocomplete="off" placeholder="" class="layui-input"
                           readonly onclick="deptTreeSelect(this)">
                </div>
            </div>
            <div class="layui-form-item">
                <input type="hidden" name="id">
                <label class="layui-form-label">事项编码</label>
                <div class="layui-input-block">
                    <input type="text" name="itemCode" lay-verify="title" autocomplete="off"
                           placeholder="前面2个中文或4个中文（确认、许可、处罚、强制、征收、给付、裁决、奖励、其他、公共服务、审核转报）-5位数字-3位数字"
                           class="layui-input" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">事项名称</label>
                <div class="layui-input-block">
                    <input type="text" name="itemName" lay-verify="title" autocomplete="off" placeholder="请输入事项名称"
                           class="layui-input" >
                </div>
            </div>
            <div class="layui-form-item" style="display:none;">
                <label class="layui-form-label">事项类别</label>
                <div class="layui-input-block">
                    <select name="itemCategory" lay-verify="required" lay-search="" >
                        <option value="">== 请选择 ==</option>
                        <option v-for="item in selectList.item_category" :key="item.id" :value="item.value">{{item.name}}</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item" style="display:none;">
                <label class="layui-form-label">年平均办件量(件)</label>
                <div class="layui-input-block">
                    <input type="text" name="averageQuantity" lay-verify="number" autocomplete="off"
                           placeholder="请输入年平均办件量" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">办理层级</label>
                <div class="layui-input-block">
                    <select name="dealHierarchy" lay-verify="required" lay-search="" >
                        <option value="">== 请选择 ==</option>
                        <option v-for="item in selectList.deal_hierarchy" :key="item.id" :value="item.value">{{item.name}}</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">有无子项</label>
                <div class="layui-input-block">
                    <input type="radio" name="hasChild" value="1" title="有" checked lay-filter="hasChild">
                    <input type="radio" name="hasChild" value="0" title="无" lay-filter="hasChild">
                </div>
            </div>
            <button v-show="buttonDisp" class="layui-btn layui-submit" lay-submit="" lay-filter="submit_button">立即提交
            </button>
        </form>
    </div>

    <form class="layui-form">
        <div class="menu-tree-modules" style="display: none">
            <menu-tree></menu-tree>
        </div>
    </form>

    <form class="layui-form">
        <div class="department-tree-modules" style="display: none">
            <dept-tree></dept-tree>
        </div>
    </form>

</div>
</body>

<script src="../../public/libs/jquery-2.1.1.min.js"></script>
<script src="../../public/libs/layui/layui.js"></script>
<script src="../../public/libs/vue.js"></script>
<script src="../../components/menuTree.js"></script>
<script src="../../public/libs/layui/lay/modules/xtree.js"></script>
<script src="../../components/deptTree.js"></script>
<!-- <script src="../public/js/index.js"></script> -->

<script>
    var vm = new Vue({
        el: '.item_table',
        data: {
            requestType: 'post',
            formList: {
                id: '',
                demandDepartId: '',
                demandDepartName: '',
                itemCode: '',
                itemName: '',
                dealHierarchy: '',
                averageQuantity: '',
                itemCategory: '',
                hasChild: ''
            },
            buttonDisp: true,
            delIds: [],
            searchData: {
                itemName: ''
            },
            selectList: parent.vm.selectList
        },
        methods: {
            getList () {
                layui.use('table', function () {
                    var table = layui.table;

                    table.render({
                        elem: '#layui_table'
                        , id: 'idTest'
                        , url: '/user/list'
                        , page: true
                        , where: vm.searchData
                        , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                        , cols: [[
                            {type: 'checkbox'}
                            , {field: 'id', title: 'ID'}
                            , {field: 'username', title: '登录名'}
                            , {field: 'realname', title: '姓名'}
                            , {field: 'deptId', title: '所属机构'}
                            , {field: 'email', title: '邮箱'}
                            , {field: 'lock', title: '操作', templet: '#template', width: 200}
                        ]]
                    });

                    table.on('tool(layerTable)', function (obj) {
                        var data = obj.data;
                        if (obj.event === 'detail') {
                        // layer.msg('ID：'+ data.id + ' 的查看操作');
                            vm.detailButton(data);
                        } else if (obj.event === 'edit') {
                            vm.editButton(data);
                        } else if (obj.event === 'del') {
                            vm.deleteButton(data.id);
                        }
                    });

                    table.on('checkbox(layerTable)', function (obj) {
                        var checkStatus = table.checkStatus('idTest')
                        console.log("checkStatus: ", checkStatus)
                        $.each(checkStatus.data, function (index, item) {
                            vm.delIds.push(item.id);
                        })
                        console.log("vm.delIds: ", vm.delIds)
                    });

                });
            },
            isHadChild () {
                layui.use('form', function () {
                    var form = layui.form;
                    form.on('radio(hasChild)', function (data) {
                        $('#item_form select[name=itemCategory]').parent().parent().toggle();
                        $('#item_form input[name=averageQuantity]').parent().parent().toggle();
                        if (data.value == 1) {
                            $('#item_form select[name=itemCategory]')
                        } else if (data.value == 0) {
//                            $('#item_form select[name=itemCategory]').parent().parent().toggle();
//                            $('#item_form input[name=averageQuantity]').parent().parent().toggle();
                        }
                    });
                });
            },
            refreshData () {
                for (var i in vm.formList) {
                    vm.formList[i] = ''
                }
            },
            validate () {
                layui.use(['form', 'layedit', 'laydate'], function () {
                    form = layui.form
                            , layer = layui.layer
                            , layedit = layui.layedit
                            , laydate = layui.laydate;

                    form.on('submit(submit_button)', function (data) {
                        $.ajax({
                            url: '/item/save',
                            data: data.field,
                            type: vm.requestType,
                            success: function (res) {
                                vm.getList();
                                vm.refreshData();
                                layer.close(layeForm)
                            }
                        })
                        return false;
                    });
                })
            },
            addButton () {
                this.getSelect('item_form')
                form.render()
                layui.use('layer', function () {
                    layeForm = layer.open({
                        title: '新增',
                        type: 1,
                        area: ['80%', '80%'],
                        scrollbar: false,
                        zIndex: 100,
                        cancel: function () {
                            vm.refreshData();
                            vm.buttonDisp = true;
                            vm.requestType = 'post';
                        },
                        content: $('#item_layer')
                    });
                });
            },
            detailButton (data) {
                console.log("data: ", data)
                for (var i in vm.formList) {
                    vm.formList[i] = data[i]
                }
// vm.formList = data;
                this.addButton();
                vm.buttonDisp = false;
            },
            editButton (data) {
                vm.requestType = 'put';
                for (var i in vm.formList) {
                    vm.formList[i] = data[i]
                }
// vm.formList = data;
                console.log("form: ", form)
                this.addButton();
            },
            deleteButton (id) {
                var ids = [];
                ids.push(id)
                console.log("ids: ", ids)
                vm.deleteRow(ids)
            },
            deleteAll () {
                vm.deleteRow(vm.delIds);
            },
            deleteRow (ids) {
                layui.use('layer', function () {
                    layeConfirm = layer.confirm('您确定要删除么？', {
                        btn: ['确定', '取消']
                    }, function () {
                        $.ajax({
                            url: '/user',
                            data: JSON.stringify(ids),
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            type: 'delete',
                            success: function (res) {
                                layer.close(layeConfirm)
                                vm.getList();
                                vm.delIds = [];
                            }
                        })
                    });
                });
            },
            getSelect (formId) {
                $('#' + formId).find('select').each(function () {
                    $(this).val(vm.formList[$(this).attr('name')])
                })
            }
        },
        created () {
            this.getList();
            this.validate();
            this.isHadChild();
        }
    })

    function deptValueChange() {
        vm.formList.deptName = $('#item_form input[name=deptName]').val()
        vm.formList.deptId = $('#item_form input[name=deptId]').val()
    }
</script>

<script type="text/html" id="template">
    <a class="layui-btn layui-btn-primary layui-btn-sm" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
</script>


</html>